<f:layout name="Section" />

This Template is responsible for creating a table of domain objects.

If you modify this template, do not forget to change the overwrite settings
in /Configuration/ExtensionBuilder/settings.yaml:
  Resources:
    Private:
      Templates:
        List.html: keep

Otherwise your changes will be overwritten the next time you save the extension in the extension builder

<f:section name="main">
<div class="portfolio-tabs clearfix">
	<ul class="clearfix">
		<li class="active"><a data-filter="*" href="#">Tous</a></li>
		<li><a data-filter=".5" href="#">+ 5000m</a></li>
		<li><a data-filter=".4" href="#">4000m</a></li>
		<li><a data-filter=".3" href="#">3000m</a></li>
		<li><a data-filter=".2" href="#">2000m</a></li>
		<li><a data-filter=".1" href="#">1000m</a></li>
		<li><a data-filter=".0" href="#">- 1000m</a></li>
	</ul>
</div>
<div class="portfolio">
	<ul  class="portfolio-items portfolio-style1 filterable-items row-fluid style2" data-columns="4">		
		<f:for each="{mountains}" as="mountain">
		<li class="portfolio-item span3 {mountain.groupAltitude} first-row">
            <div class="inner-content">
              <div class="image hoverlay">
				<f:image src="{mountain.firstFlag}" alt="{mountain.firstCountryName}" width="190" height="126c"  style="padding:15px 20px;" />		 
					<f:if condition="{mountain.done}">
						<f:then>
						<div class="overlay" style="background: none;opacity: 1;">
							<a class="icon prettyPhoto" href="./images/portfolio-medium.jpg" style="font-size:72px;height:100px;width:100px;line-height:100px;margin-left:-50px;margin-top:-50px;color:green;">
								<i class="fa fa-check"></i>
							</a>
						</f:then>
						<f:else>
						<div class="overlay">
							<a class="icon prettyPhoto" href="./images/portfolio-medium.jpg">
								<i class="icon-blandes-search"></i>
							</a>
						</f:else>
					</f:if>
                    <div class="overlay-content"> </div>
                </div>
              </div>
              <div class="info">
                <h4><a href="#">{mountain.name}</a></h4>
                <h5><a href="#" rel="tag">{mountain.altitude} m</a> <a href="#" rel="tag">({mountain.firstCountryName})</a></h5>
              </div>
            </div>
		</li>          
		</f:for>  
	</ul>
</div>




</f:section>